// #ifdef VUE3
@use "sass:math";
// #endif
@import '@/uni_modules/lime-style/index.scss';


$prefix: l !default;
$step: #{$prefix}-step;


$step-dot-size: create-var(step-dot-size, 16rpx);
$step-circle-size: create-var(step-circle-size, 44rpx);
$step-circle-font-size: create-var(step-circle-font-size, 28rpx);
$step-circle-icon-size: create-var(step-circle-icon-size, 32rpx);
$step-description-color: create-var(step-description-color, $text-color-3);

$step-wait-circle-bg-color: create-var(step-wait-circle-bg-color, $gray-1);
$step-wait-circle-color: create-var(step-wait-circle-color, $text-color-3);
$step-wait-title-color: create-var(step-wait-title-color, $text-color-3);
$step-wait-icon-color: create-var(step-wait-icon-color, $text-color-3);
$step-wait-dot-border-color: create-var(step-wait-dot-border-color, $gray-4);

$step-process-circle-color: create-var(step-process-circle-color, white);
$step-process-circle-bg-color: create-var(step-process-circle-bg-color, $primary-color);
$step-process-title-color: create-var(step-process-title-color, $primary-color);
$step-process-icon-color: create-var(step-process-icon-color, $primary-color);
$step-process-dot-border-color: create-var(step-process-dot-border-color, $primary-color);

$step-finish-circle-color: create-var(step-finish-circle-color, $primary-color);
$step-finish-circle-bg-color: create-var(step-finish-circle-bg-color, $primary-color-1);
$step-finish-title-color: create-var(step-finish-title-color, $text-color-1);
$step-finish-icon-color: create-var(step-finish-icon-color, $primary-color);
$step-finish-dot-border-color: create-var(step-finish-dot-border-color, $primary-color);

$step-error-circle-color: create-var(step-error-circle-color, $error-color);
$step-error-circle-bg-color: create-var(step-error-circle-bg-color, $error-color-1);
$step-error-title-color: create-var(step-error-title-color, $error-color);
$step-error-icon-color: create-var(step-error-icon-color, $error-color);
$step-error-dot-border-color: create-var(step-error-dot-border-color, $error-color);


$step-line-color: create-var(step-line-color, $gray-4);
$step-finish-line-color: create-var(step-finish-line-color, $primary-color);


/* #ifdef MP */
:host {
	flex: 1;
	vertical-align: top;
    position: relative;
    align-self: flex-start;
    width: inherit;
}
/* #endif */

$wait-type-map:(
	bgVar: $step-wait-circle-bg-color,
	colorVar: $step-wait-circle-color,
	titleColorVar: $step-wait-title-color,
	iconColorVar: $step-wait-icon-color,
	dotBorderColorVar: $step-wait-dot-border-color
);
$process-type-map:(
	bgVar: $step-process-circle-bg-color,
	colorVar: $step-process-circle-color,
	titleColorVar: $step-process-title-color,
	iconColorVar: $step-process-icon-color,
	dotBorderColorVar: $step-process-dot-border-color
);
$finish-type-map:(
	bgVar: $step-finish-circle-bg-color,
	colorVar: $step-finish-circle-color,
	titleColorVar: $step-finish-title-color,
	iconColorVar: $step-finish-icon-color,
	dotBorderColorVar: $step-finish-dot-border-color
);
$error-type-map:(
	bgVar: $step-error-circle-bg-color,
	colorVar: $step-error-circle-color,
	titleColorVar: $step-error-title-color,
	iconColorVar: $step-error-icon-color,
	dotBorderColorVar: $step-error-dot-border-color
);
$status-map:(
	process: $process-type-map,
	wait: $wait-type-map,
	finish: $finish-type-map,
	error: $error-type-map,
);

@mixin color-generate {
	// $statuses: wait, process, finish, error;
	$statuses: wait, process, finish, error;
	
	@each $status in $statuses {
		$type-map: map-get($status-map, $status);
		
	    $bgVar: map-get($type-map, bgVar);
	    $colorVar: map-get($type-map, colorVar);
	    $titleColorVar: map-get($type-map, titleColorVar);
	    $iconColorVar: map-get($type-map, iconColorVar);
	    $dotBorderColorVar: map-get($type-map, dotBorderColorVar);
		
		/* #ifdef APP-ANDROID || APP-IOS */
		&__circle-text--#{$status} {
			color: $colorVar;
		}
		/* #endif */
	    &__circle--#{$status} {
			/* #ifndef UNI-APP-X */
			color: $colorVar;
			/* #endif */
			background-color: $bgVar;
			/* #ifndef APP-ANDROID || APP-IOS */
			.#{$step}__circle-text {
				color: $colorVar;
			}
			/* #endif */
	    }
	
	    &__title--#{$status} {
			color: $titleColorVar;
	    }
	
	    &__icon--#{$status} {
			color: $iconColorVar;
	    }
		&__dot--#{$status} {
			@if $status == "process" {
				background-color: $dotBorderColorVar;
				border-color: transparent
			} @else {
				border-color: $dotBorderColorVar;
			}
		}
	}
}

.#{$step} {
	/* #ifndef UNI-APP-X */
	display: flex;
	vertical-align: top;
	/* #endif */
	
	
	position: relative;
	overflow: visible;
	@include color-generate;
	&--vertical {
		
		flex-direction: row;
	}
	&--horizontal {
		flex: 1;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	}
	&__anchor {
	    /* #ifndef UNI-APP-X */
	    display: flex;
	    /* #endif */
	    align-items: center;
	    justify-content: center;
	
	    &--vertical {
	      width: $step-circle-size;
	      height: $step-circle-size;
	    }
	} 
	 &__circle {
	    /* #ifndef UNI-APP-X */
	    display: flex;
	    /* #endif */
	    justify-content: center;
	    align-items: center;
	    width: $step-circle-size;
	    height: $step-circle-size;
	    // text-align: center;
	    border-radius: 999px;
	    // font-size: $step-circle-font-size;
		&-text {
			font-size: $step-circle-font-size;
			text-align: center;
		}
		&-icon {
			font-weight: 700;
			font-size: $step-circle-icon-size !important;
			text-align: center;
			/* #ifndef UNI-APP-X */
			display: inline-flex;
			/* #endif */
		}
	} 
	&__icon {
	    z-index: 1;
		/* #ifndef APP-ANDROID || APP-IOS */
		vertical-align: top;
	    font-size: $font-size;
		/* #endif */
	    position: relative;
		&-text {
			font-size: $font-size;
		}
	}
	&__dot {
	    width: $step-dot-size;
	    height: $step-dot-size;
	    border-radius: 99px;
	    border-width: 1px;
	    border-style: solid;
	    box-sizing: border-box;
	}
	&__content {
	    // text-align: center;
	    &--horizontal {
			max-width: 80px;
			margin-top: 16rpx;
	    }
	
	    &--vertical {
			margin-left: 16rpx;
			flex: 1;
			padding-bottom: 32rpx;
	    }
	
	    &--vertical#{&}--last {
			padding-bottom: 0;
	    }
	}
	&__title {
	    position: relative;
	    line-height: $step-circle-size;
	    font-size: $font-size;
	
	    &--process {
			font-weight: 700;
	    }
	
	    &--vertical {
			text-align: left;
			// display: flex;
			/* #ifndef APP-ANDROID || APP-IOS */
			align-items: center;
			justify-content: space-between;
			/* #endif */
			margin-bottom: 8rpx;
	    }
	}
	&__description {
	    color: $step-description-color;
	    line-height: 40rpx;
	    font-size: $font-size-sm;
		
		&--horizontal {
			text-align: center;
		}
	    &--vertical {
			text-align: left;
	    }
	}
	&__extra {
		/* #ifndef APP-ANDROID || APP-IOS */
	    &:not(:empty) {
			margin-top: 16rpx;
	    }
		/* #endif */
	}
	&__line {
	    background-color: $step-line-color;
	    // content: '';
	    // display: block;
	    position: absolute;
	
	    &--horizontal {
			height: 1px;
			transform: translateY(-50%);
			/* #ifndef APP-ANDROID || APP-IOS */
			width: calc(100% - 32rpx - $step-circle-size);
			left: calc(50% + $step-circle-size / 2 + 16rpx);
			top: calc($step-circle-size / 2 + 1px);
			/* #endif */
			/* #ifdef APP-ANDROID || APP-IOS */
			// width: calc(100% - 32rpx - $step-circle-size);
			// left: calc(50% + $step-circle-size / 2 + 16rpx);
			top: math.div($step-circle-size , 2)  + 2rpx;
			/* #endif */
			
	    }
	
	    &--horizontal#{&}--dot {
			/* #ifndef APP-ANDROID || APP-IOS */
			top: calc($step-dot-size / 2);
			/* #endif */
			/* #ifdef APP-ANDROID || APP-IOS */
			top:  math.div($step-dot-size, 2);
			/* #endif */
	    }
	
	    &--finish,
	    &--reverse#{&}--process {
			background-color: $step-finish-line-color;
	    }
	
	    &--vertical {
			width: 1px;
			transform: translateX(-50%);
			
			/* #ifndef APP-ANDROID || APP-IOS */
			height: calc(100% - 32rpx - $step-circle-size);
			left: calc($step-circle-size / 2);
			top: calc($step-circle-size + 16rpx);
			/* #endif */
			
			/* #ifdef APP-ANDROID || APP-IOS */
			left: math.div($step-circle-size , 2);
			top: $step-circle-size + 16rpx;
			/* #endif */
	    }
	
	    &--vertical#{&}--dot {
			top: $step-circle-size;
			/* #ifndef APP-ANDROID || APP-IOS */
			height: calc(100% - $step-circle-size);
			/* #endif */
	    }
	}
}
